<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-text"></i> 数据管理 / 数据管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.area" placeholder="" class="handle-select mr10" size="small">
					<el-option key="a" label="全部区域" value=""></el-option>
					<el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
				</el-select>
        <el-select v-model="query.trade" placeholder="" class="handle-select mr10" size="small">
          <el-option label="全部行业" value=""></el-option>
          <el-option label="运输业" :value="1"></el-option>
          <el-option label="多式联运和运输代理业" :value="2"></el-option>
          <el-option label="装卸搬运和仓储业" :value="3"></el-option>
        </el-select>
        <el-input v-model="query.year" placeholder="年份" class="handle-select mr10" size="small"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch" size="small">搜索</el-button>
				<el-button icon="el-icon-lx-refresh" @click="refreshPage" :loading="refreshLoading" size="small">清除条件</el-button>
				<el-button type="primary" icon="el-icon-lx-add" @click="handleAdd" size="small">添加</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column label="区域" prop="area" align="center" width="160"></el-table-column>
				<el-table-column label="行业" prop="trade" align="center" width="240">
          <template #default="scope">
            <span v-if="scope.row.trade === 1">运输业</span>
            <span v-if="scope.row.trade === 2">多式联运和运输代理业</span>
            <span v-if="scope.row.trade === 3">装卸搬运和仓储业</span>
          </template>
        </el-table-column>
				<el-table-column label="企业数量" prop="company_num" align="center" width="160"></el-table-column>
				<el-table-column label="年份" prop="year" align="center" width="160"></el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!--						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination hide-on-single-page background layout="total, prev, pager, next, jumper" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
    <el-dialog v-model="editVisible" title="编辑数据" fullscreen>
      <div class="dialog-container">
        <div class="body-box">
          <table class="table-common">
            <tr>
              <td>
                <div class="label">区域</div>
              </td>
              <td>
                <div>
                  <el-select v-model="formData.area" placeholder="请选择区域" :disabled="editId!==0">
                    <el-option v-for="(item,index) in areaList" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="label">行业</div>
              </td>
              <td>
                <div>
                  <el-select v-model="formData.trade" placeholder="请选择行业" :disabled="editId!==0">
                    <el-option label="运输业" :value="1"></el-option>
                    <el-option label="多式联运和运输代理业" :value="2"></el-option>
                    <el-option label="装卸搬运和仓储业" :value="3"></el-option>
                  </el-select>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="label">年份</div>
              </td>
              <td>
                <div>
                  <el-select v-model="formData.year" placeholder="请选择年份" :disabled="editId!==0">
                    <el-option v-for="year in yearOption" :key="year" :label="year" :value="year"></el-option>
                  </el-select>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="label">企业数量</div>
              </td>
              <td>
                <div>
                  <el-input v-model="formData.company_num" type="number"></el-input>
                </div>
              </td>
            </tr>
          </table>
          <table class="table-common">
            <tr v-for="i in 12">
              <td><div class="label">1~{{i}}月数据(万元)</div></td>
              <td><div><el-input v-model="formData['month'+i]" type="number"></el-input></div></td>
              <td><div class="label">上年同期(万元)</div></td>
              <td><div><el-input v-model="formData['month'+i+'_last_year']" type="number"></el-input></div></td>
              <td><div class="label">增速(%)</div></td>
              <td><div><el-input v-model="formData['month'+i+'_rate']" type="number"></el-input></div></td>
            </tr>
          </table>
        </div>
        <div class="footer">
          <el-button type="default" @click="editVisible=false" size="small">取消</el-button>
          <el-button type="primary" @click="itemEditDo" size="small">保存</el-button>
        </div>
      </div>
    </el-dialog>
	</div>
</template>
<script>
import {defineComponent} from "vue";
export default defineComponent({name:'area_data'})
</script>
<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "../../utils/request";
import Methods from "../../utils/Methods";

const yearOption = ref([])
const formData = ref({})

const query = reactive({
  area: "",
  trade: "",
  year: "",
  pageIndex: 1,
  pageSize: 10,
})
const tableData = ref([])
const pageTotal = ref(0)
const areaList = ref([])
const editVisible = ref(false);
const editId = ref(0);

const itemEditDo = () => {
  request({
    url: '/manage/Area/saveData',
    method: 'post',
    data: formData.value
  }).then(res => {
    console.log("res", res)
    ElMessage.success('保存成功!')
    editVisible.value = false
    getData()
  }).catch(error => {
    console.log(error)
  })
}

const getData = () => {

  request({
    url: '/manage/Area/areaDataList',
    method: 'post',
    data: query
  }).then(res => {
    // console.log("res", res)
    tableData.value = res.list
    pageTotal.value = res.count
  }).catch(error => {
    console.log(error)
  })

}

const getAreaList = () => {
  request({
    url: '/manage/Area/getAreaList',
    method: 'post',
    data: {}
  }).then(res => {
    // console.log("res", res)
    areaList.value = res.list
  }).catch(error => {
    console.log(error)
  })
}


const refreshLoading = ref(false)

const refreshPage = () => {
  query.area = ''
  query.trade = ''
  query.year = ''
  query.pageIndex = 1
  getData()
  getAreaList()
}

const initData = () => {
  let arr = []
  for(let i=1974; i<=2047; i++) {
    arr.push(String(i))
  }
  yearOption.value = arr
  formData.value = {
    area: '',
    trade: '',
    year: '2023',
    company_num: 0,
    month1: 0,
    month1_last_year: 0,
    month1_rate: 0,
    month2: 0,
    month2_last_year: 0,
    month2_rate: 0,
    month3: 0,
    month3_last_year: 0,
    month3_rate: 0,
    month4: 0,
    month4_last_year: 0,
    month4_rate: 0,
    month5: 0,
    month5_last_year: 0,
    month5_rate: 0,
    month6: 0,
    month6_last_year: 0,
    month6_rate: 0,
    month7: 0,
    month7_last_year: 0,
    month7_rate: 0,
    month8: 0,
    month8_last_year: 0,
    month8_rate: 0,
    month9: 0,
    month9_last_year: 0,
    month9_rate: 0,
    month10: 0,
    month10_last_year: 0,
    month10_rate: 0,
    month11: 0,
    month11_last_year: 0,
    month11_rate: 0,
    month12: 0,
    month12_last_year: 0,
    month12_rate: 0,
  }
}




const handleAdd = () => {
  editId.value = 0
  initData()
  editVisible.value = true
}
const handleEdit = (index,row) => {
  editId.value = row.id
  initData()
  editVisible.value = true
  getDetail()

}

const getDetail = () => {
  console.log("id = ", editId.value)
  request({
    url: '/manage/Area/areaDataDetail',
    method: 'post',
    data: {
      id: editId.value
    }
  }).then(res => {
    formData.value = res
    console.log("res", formData.value)
  }).catch(error => {
    console.log(error)
  })
}

initData()
getData()
getAreaList()


// 查询操作, 分页导航
const handleSearch = () => {
  query.pageIndex = 1;getData();
};
const handlePageChange = (val) => {
  query.pageIndex = val;getData();
};

</script>

<style scoped lang="scss">
@import "../../assets/css/common.css";
.handle-box {
	margin-bottom: 5px;
	//display: flex;
	//flex-wrap: wrap;
}
.handle-select {
	width: 150px;
	margin-bottom: 15px;
}
.handle-input {
	width: 300px;
	margin-bottom: 15px;
}
.table {
	width: 100%;
	font-size: 14px;
	.cover {
		width: 140px;
		height: 80px;
		background-position: center center;
		background-size: cover;
	}
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
</style>
